<script lang="ts" name="example" setup>
import {reactive, ref} from 'vue'
import {IMyTableProps} from '@/interface/table'
import AddForm from '@/views/example/components/AddForm.vue'
import BaseSearch from '@/components/BaseSearch/index.vue'
import {IForm} from '@/interface/form'

defineOptions({
	name: 'example'
})

const dialogVisible = ref(false) // 弹框是否展示
const title = ref('') // 弹框的标题

const dictList = reactive([
	{
		dictLabel: '等级1',
		dictValue: '1'
	},
	{
		dictLabel: '等级2',
		dictValue: '2'
	},
	{
		dictLabel: '等级3',
		dictValue: '3'
	}
]) // 字典数据
const handleCurrentChange = (val: number) => {
	console.log(val, '我是第几页')
}

const add = (item: any) => { // 新增按钮点击
	console.log('新增', item)
	dialogVisible.value = true
}

const searchForm = ref<IForm>({
	data: {
		text: '',
		text1: '',
		text2: '',
		slotInput: ''
	},
	otherConfig: {
		labelWidth: '64px'
	},
	config: [
		{
			col: 4,
			component: 'ElInput',
			name: '纯文本',
			bind: 'text',
			attr: {
				type: 'text',
				placeholder: '请输入文本'
			}
		},
		{
			col: 4,
			component: 'ElInput',
			name: '纯文本',
			bind: 'text1',
			attr: {
				type: 'text',
				placeholder: '请输入文本'
			}
		},
		{
			col: 4,
			component: 'ElInput',
			name: '纯文本',
			bind: 'text2',
			attr: {
				type: 'text',
				placeholder: '请输入文本'
			}
		},
		{
			col: 4,
			component: 'customSlot',
			name: '插槽--输入',
			bind: 'slotInput'
		}
	]
})
// 表格数据和配置项
const table = reactive<IMyTableProps>({
	tableHeader: [
		{
			label: 'ID',
			prop: 'id',
			hidden: false,
			childrenList: [
				{
					label: '插槽',
					prop: 'btnSlot',
					slotName: 'btnSlot',
					width: 1000,
					hidden: true
				},
				{
					label: 'html',
					prop: 'text',
					textType: 'html'
				},
				{
					label: 'dict',
					prop: 'leave',
					textType: 'dict',
					dictList: dictList,
					dictProps: {
						label: 'dictLabel',
						value: 'dictValue'
					}
				},
				{
					label: '第四层',
					prop: 'four',
					childrenList: [
						{
							label: 'icon',
							prop: 'icon',
							textType: 'icon',
							hidden: true
						},
						{
							label: 'img',
							textType: 'img',
							prop: 'imgList' // 数据是一个string数组
						}
					]
				}
			]
		},
		{
			label: '嗨嗨',
			slotName: 'btnSlot',
			prop: 'hi',
			width: 720,
			childrenList: [
				{
					label: 'tag',
					prop: 'tag',
					textType: 'tag',
					tagRound: true,
					tagEffect: 'dark',
					dictList,
					dictProps: {
						label: 'dictLabel',
						value: 'dictValue'
					}
				},
				{
					label: 'textColor',
					textType: 'textColor',
					prop: 'textColor',
					color: '#f00',
					width: '100'
				},
				{
					label: 'click',
					textType: 'click',
					prop: 'click',
					handleClick(row: any, item: any, index: number) {
						console.log(row, item, index)
					}
				},
				{
					label: '测试',
					prop: 'test'
				}
			]
		}
	],
	tableConfig: {
		data: [
			{
				id: 1000,
				one: '1',
				text: '<h3>我是html</h3>',
				textColor: '我是文字颜色',
				click: '我是点击',
				icon: 'material-symbols:15mp-sharp',
				//imgList: 'https://ooo.0x0.ooo/2023/07/26/OiqOIG.jpg',
				imgList: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://ooo.0x0.ooo/2023/07/26/OiqOIG.jpg'],
				leave: '2',
				tag: '2',
				test: 'test'
			},
			{
				id: 1001,
				one: '2',
				text: '<h3>我是html</h3>',
				textColor: '我是文字颜色',
				click: '我是点击',
				icon: 'material-symbols:15mp-sharp',
				//imgList: 'https://ooo.0x0.ooo/2023/07/26/OiqOIG.jpg',
				imgList: ['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://ooo.0x0.ooo/2023/07/26/OiqOIG.jpg'],
				leave: '1',
				tag: '2',
				test: 'test'
			}
		],
		width: 120,
		height: 655,
		onMethods: {
			select: (val: any) => {
				console.log(val, '选中')
			},
			selectAll: (val: any) => {
				console.log(val, '全选, 表格的事件都可以直接写,没有提示')
			},
			cellDblclick: (val: any) => {
				console.log(val, '单元行双击')
			}
		}
	},
	innerBtn: [
		{
			name: '编辑',
			method: (row, item) => console.log('编辑', row, item),
			icon: 'Edit'
		}
	],
	outerBtn: [
		{
			name: '新增',
			method: add,
			icon: 'Plus'
			// code: "menu/add", // 预留做权限使用
		}
	],
	otherConfig: {
		outerBtnAlign: 'left',
		needIndex: '序号',
		needSelection: true,
		innerBtnFixed: 'right',
		rightMenuShow: true
	},
	tablePage: {
		pageSize: 20,
		currentPage: 1,
		total: 4000,
		hideOnSinglePage: true,
		'size-change': (val: number) => {
			console.log(val, '每页多少条')
		},
		'current-change': handleCurrentChange
	}
})

const searchFn = () => {
	console.log(searchForm.value.data, '搜索条件')
}
</script>

<template>
	<base-search v-model="searchForm.data" :search-config="searchForm" @search-fn="searchFn">
		<template #slotInput>
			<el-input v-model="searchForm.data.slotInput"/>
		</template>
	</base-search>
	<base-table
		:inner-btn="table.innerBtn"
		:other-config="table.otherConfig"
		:outer-btn="table.outerBtn"
		:table-config="table.tableConfig"
		:table-header="table.tableHeader"
		:table-page="table.tablePage"
	>
		<template #btnSlot="{scope}">
			<el-button>按钮</el-button>
			scope: {{ scope }}
		</template>
	</base-table>

	<add-form v-if="dialogVisible" :hide-dialog="() => (dialogVisible = false)" :title="title"/>
</template>

<style lang="scss" scoped>

</style>
